<!--
 * @Description: 右键菜单组件-右键指定元素可唤出菜单
 * @FilePath: \hk-marketing-crm\src\components\contextMenu\index.vue
 * @Date: 2023-07-27 09:56:20
 * @LastEditTime: 2023-07-27 09:56:44
-->
<template>
	<transition name="el-zoom-in-center">
		<div
			aria-hidden="true"
			class="el-dropdown__popper el-popper is-light is-pure custom-contextmenu"
			role="tooltip"
			data-popper-placement="bottom"
			:style="`top: ${dropdowns.y + 10}px;left: ${dropdowns.x}px;`"
			:key="Math.random()"
			v-show="isShow"
		>
			<ul class="el-dropdown-menu">
				<li
					v-for="(v, k) in dropdownList"
					class="el-dropdown-menu__item"
					aria-disabled="false"
					tabindex="-1"
					:key="k"
					@click="onCurrentContextmenuClick(v.contextMenuClickId)"
				>
					<SvgIcon :name="v.icon" />
					<span>{{ v.txt }}</span>
				</li>
			</ul>
			<div class="el-popper__arrow" :style="{ left: `${arrowLeft}px` }"></div>
		</div>
	</transition>
</template>

<script lang="ts">
import { computed, defineComponent, reactive, toRefs, onMounted, onUnmounted, watch } from 'vue';

export default defineComponent({
	name: 'contextMenu',
	props: {
		// 框的位置
		dropdown: {
			type: Object,
			default: () => {
				return {
					x: 0,
					y: 0,
				};
			},
		},
		// 框的内容
		dropdownList: {
			type: Array as any,
			default: () => {
				return [
					{ contextMenuClickId: 0, txt: '删除', icon: 'ele-Delete' },
					{ contextMenuClickId: 1, txt: '编辑', icon: 'ele-Edit' },
				];
			},
		},
	},
	setup(props, { emit }) {
		const state = reactive({
			isShow: false,
			// dropdownList: [
			// 	{ contextMenuClickId: 0, txt: 'message.tagsView.refresh', affix: false, icon: 'ele-RefreshRight' },
			// 	{ contextMenuClickId: 1, txt: 'message.tagsView.close', affix: false, icon: 'ele-Close' },
			// 	{ contextMenuClickId: 2, txt: 'message.tagsView.closeOther', affix: false, icon: 'ele-CircleClose' },
			// 	{ contextMenuClickId: 3, txt: 'message.tagsView.closeAll', affix: false, icon: 'ele-FolderDelete' },
			// ],
			item: {},
			arrowLeft: 10,
		});
		// 父级传过来的坐标 x,y 值
		const dropdowns = computed(() => {
			// 117 为 `Dropdown 下拉菜单` 的宽度
			if (props.dropdown.x + 117 > document.documentElement.clientWidth) {
				return {
					x: document.documentElement.clientWidth - 117 - 5,
					y: props.dropdown.y,
				};
			} else {
				return props.dropdown;
			}
		});
		// 当前项菜单点击
		const onCurrentContextmenuClick = (contextMenuClickId: number) => {
			// 子传父
			emit('currentContextmenuClick', Object.assign({}, { contextMenuClickId }, state.item));
		};
		// 打开右键菜单：判断是否固定，固定则不显示关闭按钮
		const openContextmenu = (item: any) => {
			state.item = item;

			closeContextmenu();
			setTimeout(() => {
				state.isShow = true;
			}, 10);
		};
		// 关闭右键菜单
		const closeContextmenu = () => {
			state.isShow = false;
		};
		// 监听页面监听进行右键菜单的关闭
		onMounted(() => {
			document.body.addEventListener('click', closeContextmenu);
		});
		// 页面卸载时，移除右键菜单监听事件
		onUnmounted(() => {
			document.body.removeEventListener('click', closeContextmenu);
		});
		// 监听下拉菜单位置
		watch(
			() => props.dropdown,
			({ x }) => {
				if (x + 117 > document.documentElement.clientWidth) state.arrowLeft = 117 - (document.documentElement.clientWidth - x);
				else state.arrowLeft = 10;
			},
			{
				deep: true,
			}
		);
		return {
			dropdowns,
			openContextmenu,
			closeContextmenu,
			onCurrentContextmenuClick,
			...toRefs(state),
		};
	},
});
</script>

<style scoped lang="scss">
.custom-contextmenu {
	transform-origin: center top;
	z-index: 2190;
	position: fixed;
	.el-dropdown-menu__item {
		font-size: 12px !important;
		white-space: nowrap;
		i {
			font-size: 12px !important;
		}
	}
}
</style>
